<template>
  <span>
    <span @click="show = true">
      <slot name="trigger"></slot>
    </span>
    <slot name="header"></slot>
    <slot name="body"></slot>
    <slot name="footer"></slot>
  </span>
</template>
<script>
export default {
  data() {
    return {
      show: false
    }
  },
  mounted(that = this) {
    document.getElementsByClassName('close-modal')[0].addEventListener('click', function () {
      that.show = false
    })
  }
}
</script>
<style lang="">

</style>